<template>
<div>
  <el-row>
    <el-col :span="16">
      <el-tag>客户资料ID：{{id}}</el-tag>
      <el-divider></el-divider>
      <el-form ref="form" :disabled="disabled" size="mini" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="3">
          <el-col :span="8">
            <el-form-item label="客户姓名" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职业" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="8">
            <el-form-item label="学历" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在地区" prop="sex">
              <el-cascader
                v-model="form.area"
                :options="provinceAndCityDataOptions"
                @change="handleChangeArea"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="微信号" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="8">
            <el-form-item label="年龄" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="在职情况" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="8">
            <el-form-item label="当前薪资" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="qq" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="8">
            <el-form-item label="目前薪资" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tag>客户意向</el-tag>
      <el-divider></el-divider>
      <el-form ref="form" :disabled="disabled" :model="form" :rules="rules" label-width="100px">
        <el-row >
          <el-col :span="8">
            <el-form-item label="客户姓名" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职业" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="8">
            <el-form-item label="学历" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在地区" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="微信号" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="8">
            <el-form-item label="年龄" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="在职情况" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="8">
            <el-form-item label="当前薪资" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="qq" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="8">
            <el-form-item label="目前薪资" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tag>添加沟通记录</el-tag>
      <el-divider></el-divider>
      <el-form ref="form" :disabled="disabled" :model="form" :rules="rules" label-width="100px">
        <el-row >
          <el-col :span="8">
            <el-form-item label="客户姓名" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职业" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="8">
            <el-form-item label="学历" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在地区" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="微信号" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="8">
            <el-form-item label="年龄" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="在职情况" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="8">
            <el-form-item label="当前薪资" prop="name">
              <el-input v-model="form.name"  placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="qq" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="8">
            <el-form-item label="目前薪资" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <el-col :span="8">
      <track-list :id="id" :key="trackListKey"></track-list>
    </el-col>
  </el-row>
  <false-clue ref="falseClueDialog" @success="trackListKey++"></false-clue>
</div>
</template>

<script>
// 审核城市
import { provinceAndCityData, CodeToText, TextToCode } from 'element-china-area-data'
import {getClue} from '@/api/crm/clue'
import TrackList from "@/views/crm/clue/components/track-list";
import FalseClue from "@/views/crm/clue/components/false-clue"
import {addClueTrack,transformBusiness} from '@/api/crm/clueTrack'
export default {
  name: "track-index",
  components:{TrackList,FalseClue},
  props:{
    clueId:{
      type:[String,Number], // 类型可以是String类型，数值类型
    },
    view:{type:Boolean},
  },
  dicts:['sys_user_sex','clues_level','course_subject'],
  data(){
    return{
      id:this.clueId,
      form:{},
      rules:{},
      trackListKey:0,
      disabled:false,
      provinceAndCityDataOptions:provinceAndCityData,
    }
  },
  //在子组件里面监视外面值的变化
  watch:{
    clueId(newValue,oldValue){
      this.id =newValue
      this.getList()
    },
    view:{
      handler:function (newValue,oldValue) {
        this.disabled=newValue
      },
      immediate:true // 第一次变化就要触发
    }
  },
  created() {
    this.getList()
  },
  methods:{
    // 显示所在地区列表并赋值
    getBusiness() {
      getBusiness(this.businessId).then(resp=>{
        this.business = resp.data
        this.form = this.business
        // 根据ID设置意向课程下拉列表
        listCourse({subject: this.form.subject}).then(resp => {
          this.courseOptions = resp.rows;
        })
        // 设置省市下拉列表的值
        if (this.form.provinces && this.form.city) {
          this.form.area = [TextToCode[this.form.provinces].code, TextToCode[this.form.provinces][this.form.city].code]
        }
      })
    },
    getAssignRecord() {
      // 简单调用自动生成的分页代码，取最大id的对象当作最近的分配记录
      listAssignRecord({assignId: this.businessId, type: 1, pageNum: 1, pageSize: 5, orderByColumn: 'id', isAsc: 'desc'}).then(resp => {
        if(resp.rows && resp.rows.length > 0) {
          this.assignRecord = resp.rows.reduce((a1, a2) => { return a1.id > a2.id ? a1 : a2});
        }
      })
    },
    getList(){
      getClue(this.id).then(resp=>{
        this.form=resp.data
      })
      this.trackListKey++;
    },
    onSubmit(){
      addClueTrack(this.form).then(req=>{
        this.$message.success("操作成功")
        this.getList()
        // 通知父组件
        this.$emit("success")
      })
    },
    handleFalseClue(){
      this.$refs.falseClueDialog.open=true
      this.$refs.falseClueDialog.id=this.id
      this.$refs.falseClueDialog.resetForm()
    },
    handleTransform(){
      this.$msgbox.confirm(`确定转换线索${this.id}到商机吗？`).then(()=>{
        transformBusiness({id:this.id,record:'转商机'}).then(req=>{
          this.handleSuccess()
        })
      })
    },
    handleSuccess(){
      this.$message.success("操作成功")
      this.getList()
      this.$emit("success")
    }
  },
}
</script>

<style scoped>

</style>
